<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./lib/swiper-bundle.min.css">
	<style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }
      .swiper {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
	  .swiper-button-prev ,.swiper-button-next{
	     --swiper-navigation-color: #007aff; /* 单独设置按钮颜色 */
		 --swiper-navigation-size: 20px;    /* 设置按钮大小 */
	  }
	  .swiper-slide .detail {
		height:100px;
		background:rgba(0,0,0,.7);
		position:absolute;
		width:100%;
		bottom:0;
		color:#fff;
		opacity:0;
		transition:opacity .3s .3s;
	}
	.swiper-slide-active .detail {
		opacity:1;
	}
	.swiper-slide .detail h3 {
		/*width:950px;*/
		margin:15px auto 0;
	}
	.swiper-slide .detail p {
		/*width:950px;*/
		margin:5px auto 0;
	}
	.swiper-slide .detail p span {
		/*width:950px;*/
		display:block;
	}
    </style>
</head>
<body>
    <script src="./lib/swiper-bundle.min.js"></script>
	<script src="./js/jquery.js"></script>
	<script src="./js/pub.js"></script>



	<style>
		.menubox {
		    width: 100%;
		    height: 50px;
		    line-height: 48px;
		    background: #03a14a;
		}
		.width {
		    width: 1182px;
		    margin: 0px auto;
		    zoom: 0;
		}
		ul {
		            /*去除内外边距*/
		            margin: 0px;
		            padding: 0px;
		        }
		        
		        li {
		            /*去除开头的黑点*/
		            list-style: none;
		            background-color: #03a14a;
					
		        }
		        
		        a {
		            text-decoration: none;
		            /*去除文字下划线*/
		            line-height: 36px;
					color: aliceblue;
		        }
		        
		        .firstMenu {
		            width: 100%;
		            height: 36px;
		            background-color: #03a14a;
		        }
		        
		        .firstMenu .menu-one .menu {
		            float: left;
		            /*设置浮动*/
		            text-align: center;
		            width: 190px;
		            border-right: 2px solid #03a14a;
		            /*设置右边框，用来划分元素*/
		        }
				.nav li {
				    float: left;
				    position: relative;
				}
				.nav li>a {
				    display: block;
				    font-size: 16px;
				    color: #fff;
				    width: 197px;
				    height: 50px;
				    line-height: 50px;
				    text-align: center;
				}
			.two-nav {
			    position: absolute;
			    width: 236px;
			    margin-top: -1px;
			    z-index: 9999;
			    display: none;
			}
			.two-nav a {
			    display: block;
			    height: 40px;
			    line-height: 40px;
			    text-align: center;
			    border-bottom: solid 1px #078741;
			    color: #fff;
			    font-size: 15px;
			    background: #03a14a;
			}
	</style>
	<body >
		<div class="menubox">
			<div class="width">
				<div class="firstMenu">
					<ul  class="menu-one">
						<li class="menu" style="background: none"><a href="content.html" title="网站首页" target="contentframe">网站首页</a></li>
						<li class="menu"><a href="guizhang.html" title="规章制度" target="contentframe">规章制度</a>
							<div class="two-nav" style="display: none; height: 492px; padding-top: 0px; margin-top: -1px; padding-bottom: 0px; margin-bottom: 0px;">
								<a href="dangzuzhi.html" target="contentframe" title="党委组织部">党委组织部</a>

								<a href="studentbu.html" target="contentframe" title="学生工作部、学生处">学生工作部、学生处</a>

								<a href="baowei.html" target="contentframe" title="保卫处">保卫处</a>

								<a href="jiaowu.html" target="contentframe" title="教务处">教务处</a>

								<a href="yanjiu.html" target="contentframe" title="研究生院">研究生院</a>

								<a href="zhiliang.html" target="contentframe" title="质量管理处">质量管理处</a>

								<a href="studentjiuye.html" target="contentframe" title="学生就业指导中心">学生就业指导中心</a>

								<a href="guoji.html" target="contentframe" title="国际合作与交流处">国际合作与交流处</a>

								<a href="caiwu.html" target="contentframe" title="财务处">财务处</a>

								<a href="wangfu.html" target="contentframe" title="网服中心">网服中心</a>

								<a href="tuanwei.html" target="contentframe" title="团委">团委</a>
							</div>
						</li>
						<li class="menu"><a href="work.html" target="contentframe" title="办事流程">办事流程</a>
							<div class="two-nav">
								<a href="dangzuzhi.html" target="contentframe" title="党委组织部">党委组织部</a>
								
								<a href="studentbu.html" target="contentframe" title="学生工作部、学生处">学生工作部、学生处</a>
								
								<a href="baowei.html" target="contentframe" title="保卫处">保卫处</a>
								
								<a href="jiaowu.html" target="contentframe" title="教务处">教务处</a>
								
								<a href="yanjiu.html" target="contentframe" title="研究生院">研究生院</a>
								
								<a href="zhiliang.html" target="contentframe" title="质量管理处">质量管理处</a>
								
								<a href="studentjiuye.html" target="contentframe" title="学生就业指导中心">学生就业指导中心</a>
								
								<a href="guoji.html" target="contentframe" title="国际合作与交流处">国际合作与交流处</a>
								
								<a href="caiwu.html" target="contentframe" title="财务处">财务处</a>
								
								<a href="wangfu.html" target="contentframe" title="网服中心">网服中心</a>
								
								<a href="tuanwei.html" target="contentframe" title="团委">团委</a>
							</div>
						</li>
						<li class="menu"><a href="shiwu.html"  target="contentframe" title="事务问答">事务问答</a>
							<div class="two-nav">
								<a href="dangzuzhi.html" target="contentframe" title="党委组织部">党委组织部</a>
								
								<a href="studentbu.html" target="contentframe" title="学生工作部、学生处">学生工作部、学生处</a>
								
								<a href="baowei.html" target="contentframe" title="保卫处">保卫处</a>
								
								<a href="jiaowu.html" target="contentframe" title="教务处">教务处</a>
								
								<a href="yanjiu.html" target="contentframe" title="研究生院">研究生院</a>
								
								<a href="zhiliang.html" target="contentframe" title="质量管理处">质量管理处</a>
								
								<a href="studentjiuye.html" target="contentframe" title="学生就业指导中心">学生就业指导中心</a>
								
								<a href="guoji.html" target="contentframe" title="国际合作与交流处">国际合作与交流处</a>
								
								<a href="caiwu.html" target="contentframe" title="财务处">财务处</a>
								
								<a href="wangfu.html" target="contentframe" title="网服中心">网服中心</a>
								
								<a href="tuanwei.html" target="contentframe" title="团委">团委</a>
							</div>
						</li>
						<li class="menu"><a href="ziliao.html"  target="contentframe"  title="资料下载">资料下载</a>
							<div class="two-nav" style="display: none; height: 492px; padding-top: 0px; margin-top: -1px; padding-bottom: 0px; margin-bottom: 0px;">
								<a href="dangzuzhi.html" target="contentframe" title="党委组织部">党委组织部</a>
								
								<a href="studentbu.html" target="contentframe" title="学生工作部、学生处">学生工作部、学生处</a>
								
								<a href="baowei.html" target="contentframe" title="保卫处">保卫处</a>
								
								<a href="jiaowu.html" target="contentframe" title="教务处">教务处</a>
								
								<a href="yanjiu.html" target="contentframe" title="研究生院">研究生院</a>
								
								<a href="zhiliang.html" target="contentframe" title="质量管理处">质量管理处</a>
								
								<a href="studentjiuye.html" target="contentframe" title="学生就业指导中心">学生就业指导中心</a>
								
								<a href="guoji.html" target="contentframe" title="国际合作与交流处">国际合作与交流处</a>
								
								<a href="caiwu.html" target="contentframe" title="财务处">财务处</a>
								
								<a href="wangfu.html" target="contentframe" title="网服中心">网服中心</a>
								
								<a href="tuanwei.html" target="contentframe" title="团委">团委</a>
							</div>
						</li>
						<li class="menu"><a href="dwzzb.html" target="contentframe" title="联系部门">联系部门</a></li>
					</ul>
				</div>
			</div>
		</div>
	<div class="swiper mySwiper">
	  <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/banner.jpg"> 
<!-- 			<div class="detail">
                     <h3>1.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div> -->
		</div>
        <div class="swiper-slide"><img src="./img/banner1.jpg">
<!-- 			<div class="detail">
                     <h3>2.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div> -->
		</div>
        <div class="swiper-slide"><img src="./img/banner2.jpeg">
<!-- 			<div class="detail">
                     <h3>3.Lorem ipsum dolor sit ametel consi.</h3>
                     <p><span>Et etur adip scing elit vesti bulum ut tortor urna dunter dolor nuncet vulputate ultrices con sect eturito donec semper lacinia ultricies.</span></p>
            </div> -->
		</div>
   
      </div>
    </div>

	    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
	
	<script>
    var mySwiper = new Swiper ('.swiper', {
    //direction: 'vertical', // 垂直切换选项
	direction: 'horizontal',//水平切换
    loop: true, // 循环模式选项,true为不断循环
	speed:300,//两页之间的切换速度
	//autoplay: true,//可选选项，自动滑动轮播
	autoplay : {
		delay:2000,   //启用自动轮播并设置播放速度
		disableOnInteraction: false,//用户点击左右按钮手动切换之后，是否停止自动播放。默认为true：停止。
    },
	grabCursor : true, //鼠标放在轮播图上变为手掌

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
	  clickable :true,//点击分页器自动跳转（即点击图下的小圆点自动跳转到相应的轮播图）
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
    </script>
</body>
	</body>
</html>
